<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../img/wximg/asset-favico.ico">
    <title>传智健康</title>
    <link rel="stylesheet" href="../../css/wxcss/page-health-index.css" />
    <link rel="stylesheet" href="../../css/wxcss/page-health-login.css" />
    <link rel="stylesheet" href="../../plugins/wxplugins/elementui/index.css" />
    <script src="../../plugins/wxplugins/jquery/dist/jquery.min.js"></script>
    <script src="../../plugins/wxplugins/healthmobile.js"></script>
    <script src="../../plugins/wxplugins/vue/vue.js"></script>
    <script src="../../plugins/wxplugins/elementui/index.js"></script>
    <style>
        .health-card { margin: 15px; }
        .result-panel { padding: 20px; }
        .health-form { padding: 20px; }
        .risk-level { font-weight: bold; margin: 10px 0; }
        .risk-high { color: #F56C6C; }
        .risk-medium { color: #E6A23C; }
        .risk-low { color: #67C23A; }
    </style>
</head>
<body>
<div id="app">
    <div class="top-header">
        <span class="f-left"><i class="icon-back" onclick="history.go(-1)"></i></span>
        <span class="center">健康评估</span>
        <span class="f-right"><i class="icon-more"></i></span>
    </div>

    <div class="contentBox">
        <el-card class="health-card">
            <div slot="header">
                <span>基础信息</span>
            </div>
            <el-form :model="basicInfo" label-width="80px" class="health-form">
                <el-form-item label="年龄">
                    <el-input-number v-model="basicInfo.age" :min="1" :max="120"></el-input-number>
                </el-form-item>
                <el-form-item label="身高(cm)">
                    <el-input-number v-model="basicInfo.height" :min="50" :max="250"></el-input-number>
                </el-form-item>
                <el-form-item label="体重(kg)">
                    <el-input-number v-model="basicInfo.weight" :min="20" :max="200"></el-input-number>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card class="health-card">
            <div slot="header">
                <span>生活习惯评估</span>
            </div>
            <el-form label-width="120px" class="health-form">
                <el-form-item label="每天运动时间">
                    <el-select v-model="habits.exercise">
                        <el-option label="少于30分钟" value="1"></el-option>
                        <el-option label="30-60分钟" value="2"></el-option>
                        <el-option label="大于60分钟" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="睡眠质量">
                    <el-rate v-model="habits.sleep" :texts="['很差','较差','一般','良好','优秀']" show-text></el-rate>
                </el-form-item>
                <el-form-item label="饮食规律">
                    <el-checkbox-group v-model="habits.diet">
                        <el-checkbox label="早餐规律">早餐规律</el-checkbox>
                        <el-checkbox label="午餐规律">午餐规律</el-checkbox>
                        <el-checkbox label="晚餐规律">晚餐规律</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
        </el-card>

        <el-button type="primary" @click="calculateHealth" style="margin: 20px;">开始评估</el-button>

        <el-dialog title="健康评估报告" :visible.sync="dialogVisible" width="90%">
            <div class="result-panel">
                <h4>BMI指数：{{ bmiResult.value }}</h4>
                <p>身体状况：{{ bmiResult.status }}</p>
                <p>建议：{{ bmiResult.suggestion }}</p>

                <h4>生活习惯评分：{{ habitScore }}分</h4>
                <div :class="['risk-level', riskLevelClass]">
                    健康风险等级：{{ riskLevel }}
                </div>
                <div>
                    <h4>改善建议：</h4>
                    <ul>
                        <li v-for="(suggestion, index) in suggestions" :key="index">
                            {{ suggestion }}
                        </li>
                    </ul>
                </div>
            </div>
        </el-dialog>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            basicInfo: {
                age: 30,
                height: 170,
                weight: 65
            },
            habits: {
                exercise: '1',
                sleep: 3,
                diet: []
            },
            dialogVisible: false,
            bmiResult: {
                value: 0,
                status: '',
                suggestion: ''
            },
            habitScore: 0,
            riskLevel: '',
            suggestions: []
        },
        computed: {
            riskLevelClass() {
                switch(this.riskLevel) {
                    case '高风险': return 'risk-high';
                    case '中等风险': return 'risk-medium';
                    case '低风险': return 'risk-low';
                    default: return '';
                }
            }
        },
        methods: {
            calculateHealth() {
                // 计算BMI
                const height = this.basicInfo.height / 100;
                const bmi = this.basicInfo.weight / (height * height);
                this.bmiResult.value = bmi.toFixed(1);

                if (bmi < 18.5) {
                    this.bmiResult.status = '体重偏轻';
                    this.bmiResult.suggestion = '建议适当增加营养摄入，注意均衡饮食';
                } else if (bmi < 24) {
                    this.bmiResult.status = '体重正常';
                    this.bmiResult.suggestion = '请继续保持健康的生活方式';
                } else if (bmi < 28) {
                    this.bmiResult.status = '超重';
                    this.bmiResult.suggestion = '建议控制饮食，增加运动量';
                } else {
                    this.bmiResult.status = '肥胖';
                    this.bmiResult.suggestion = '建议咨询医生，制定减重计划';
                }

                // 计算生活习惯得分
                let score = 0;
                score += parseInt(this.habits.exercise) * 20;
                score += this.habits.sleep * 10;
                score += this.habits.diet.length * 10;
                this.habitScore = score;

                // 确定风险等级
                if (score < 50) {
                    this.riskLevel = '高风险';
                } else if (score < 80) {
                    this.riskLevel = '中等风险';
                } else {
                    this.riskLevel = '低风险';
                }

                // 生成建议
                this.suggestions = [];
                if (this.habits.exercise === '1') {
                    this.suggestions.push('建议增加运动时间，每天至少进行30分钟中等强度运动');
                }
                if (this.habits.sleep < 3) {
                    this.suggestions.push('注意改善睡眠质量，保证充足的休息时间');
                }
                if (this.habits.diet.length < 3) {
                    this.suggestions.push('建议规律进餐，保持三餐定时定量');
                }

                this.dialogVisible = true;
            }
        }
    });
</script>
</body>
</html>